<HTML>
<HEAD>
<TITLE>Obiek Image</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// globalne deklaracje tablicy obrazw
var imageDB

// obrazy przechowywane w pamici podrcznej
if (document.images) {
    // dla wygody zapisujemy tekstowe indeksy tablicy w formie listy
    var deskImages = new Array("desk1", "desk2", "desk3", "desk4")
    // tworzymy tablic obiektw Image i pobieramy obrazy do 
    // pamici podrcznej
    imageDB = new Array(4)
    for (var i = 0; i < imageDB.length ; i++) {
        imageDB[deskImages[i]] = new Image(120,90)
        imageDB[deskImages[i]].src = deskImages[i] + ".gif"
    }
}

// zmieniamy obraz pobierany bezporednio z serwera
function loadIndividual(form) {
    if (document.images) {
        var gifName = form.individual.options[form.individual.selectedIndex].value
        document.thumbnail1.src = gifName + ".gif"
    }
}

// zmieniamy obraz przechowywany w pamici podrcznej
function loadCached(form) {
    if (document.images) {
        var gifIndex = form.cached.options[form.cached.selectedIndex].value
        document.thumbnail2.src = imageDB[gifIndex].src
    }
}

// jeli pole wyboru zostao zaznaczone, to pobieramy
// kolejny obraz przechowywany w pamici podrcznej
function checkTimer() {
    if (document.images && document.Timer.timerBox.checked) {
        var gifIndex = document.selections.cached.selectedIndex
        if (++gifIndex > imageDB.length - 1) {
            gifIndex = 0
        }
        document.selections.cached.selectedIndex = gifIndex
        loadCached(document.selections)
        var timeoutID = setTimeout("checkTimer()",5000)
    }
}

// podczas usuwania strony z przegldarki odtwarzamy oryginalny
// stan list rozwijanych
function resetSelects() {
    for (var i = 0; i < document.forms.length; i++) {
        for (var j = 0; j < document.forms[i].elements.length; j++) {
            if (document.forms[i].elements[j].type == "select-one") {
                document.forms[i].elements[j].selectedIndex = 0    
            }
        }
    }
}
// inicjujemy dziaanie skryptu
function init() {
    loadIndividual(document.selections)
    loadCached(document.selections)
    setTimeout("checkTimer()",5000)
}
 </SCRIPT>
</HEAD>

<BODY onLoad="init()" onUnload="resetSelects ()">
<H1>Obiekt Image</H1>
<HR>
<CENTER>
<TABLE BORDER=3 CELLPADDING=3>
<TR><TH></TH><TH>Bezporednio z serwera</TH><TH>Z pamici podrcznej</TH></TR>
<TR><TD ALIGN=RIGHT><B>Obraz::</B></TD>
<TD><IMG SRC="cpu1.gif" NAME="thumbnail1" HEIGHT=90 WIDTH=120></TD>
<TD><IMG SRC="desk1.gif" NAME="thumbnail2" HEIGHT=90 WIDTH=120></TD>
</TR>
<TR><TD ALIGN=RIGHT><B>Wybierz obraz:</B></TD>
<FORM NAME="selections">
<TD>
<SELECT NAME="individual" onChange="loadIndividual(this.form)">
<OPTION VALUE="cpu1">Druty
<OPTION VALUE="cpu2">Klawiatura
<OPTION VALUE="cpu3">Dyskietki
<OPTION VALUE="cpu4">Kable
</SELECT>
</TD>
<TD>
<SELECT NAME="cached" onChange="loadCached(this.form)">
<OPTION VALUE="desk1">Gumki
<OPTION VALUE="desk2">Spinacze
<OPTION VALUE="desk3">Lampa
<OPTION VALUE="desk4">Gumki 2
</SELECT></TD>
</FORM>
</TR></TABLE>
<FORM NAME="Timer">
<INPUT TYPE="checkbox" NAME="timerBox" onClick="checkTimer()">Cyklicznie zmieniaj 
obrazy pobierane z pamici podrcznej
</FORM>
</CENTER>
</BODY>
</HTML>